<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .sidebar {
            height: 100vh;
            background-color: #263238;
            width: 250px; /* 增加侧边栏宽度 */
        }

        .sidebar .nav-link {
            color: #fff;
            padding: 0.8rem 1.5rem; /* 增加导航项的内边距 */
        }

        .sidebar .nav-link i {
            margin-right: 10px; /* 图标和文字之间增加间距 */
            font-size: 1.1rem; /* 略微增加图标大小 */
        }

        .sidebar .nav-link:hover {
            background-color: #37474F;
        }

        .main-content {
            background-color: #f8f9fa;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <!-- 侧边栏 -->
        <div class="col-auto px-0 sidebar">
            <div class="d-flex flex-column">
                <div class="p-3">
                    <h4 class="text-white">管理系统</h4>
                </div>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">
                            <i class="bi bi-house-door"></i> 首页
                        </a>
                    </li>
                    
                    <!-- 检查是否有任何管理权限 -->
                    <c:if test="${not empty permission}">
                        <c:set var="hasAnyManagementPermission" value="false" />
                        <c:forEach var="perm" items="${permission}">
                            <c:if test="${perm == 5 || perm == 6 || perm == 7}">
                                <c:set var="hasAnyManagementPermission" value="true" />
                            </c:if>
                        </c:forEach>
                        
                        <c:if test="${hasAnyManagementPermission}">
                            <li class="nav-item">
                                <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target="#systemSettingsSubmenu">
                                    <i class="bi bi-gear"></i> 系统设置
                                    <i class="bi bi-chevron-down float-end"></i>
                                </a>
                                <div class="collapse" id="systemSettingsSubmenu">
                                    <ul class="nav flex-column ms-4">
                                        <!-- 权限5：用户管理 -->
                                        <c:forEach var="perm" items="${permission}">
                                            <c:if test="${perm == 5}">
                                                <li class="nav-item">
                                                    <a class="nav-link text-white" href="${pageContext.request.contextPath}/MainPage/managePage/UserManagement.jsp">
                                                        <i class="bi bi-people"></i> 用户管理
                                                    </a>
                                                </li>
                                            </c:if>
                                        </c:forEach>
                                        
                                        <!-- 权限6：角色管理 -->
                                        <c:forEach var="perm" items="${permission}">
                                            <c:if test="${perm == 6}">
                                                <li class="nav-item">
                                                    <a class="nav-link text-white" href="${pageContext.request.contextPath}/MainPage/managePage/PermissionManagement.jsp">
                                                        <i class="bi bi-shield-lock"></i> 角色管理
                                                    </a>
                                                </li>
                                            </c:if>
                                        </c:forEach>
                                        
                                        <!-- 权限7：角色分配 -->
                                        <c:forEach var="perm" items="${permission}">
                                            <c:if test="${perm == 7}">
                                                <li class="nav-item">
                                                    <a class="nav-link text-white" href="${pageContext.request.contextPath}/MainPage/managePage/RoleAssignment.jsp">
                                                        <i class="bi bi-person-check"></i> 角色分配
                                                    </a>
                                                </li>
                                            </c:if>
                                        </c:forEach>
                                    </ul>
                                </div>
                            </li>
                        </c:if>
                    </c:if>
                </ul>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="col main-content">
            <!-- 顶部导航栏 -->
            <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom">
                <div class="container-fluid">
                    <button class="btn btn-link">
                        <i class="bi bi-list"></i>
                    </button>
                    <div class="ms-auto d-flex align-items-center">
                        <div class="dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                                <i class="bi bi-person-circle"></i> ${user.username}
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item" href="${pageContext.request.contextPath}/MainPage/managePage/PersonalCenter.jsp"><i class="bi bi-person"></i> 个人信息</a></li>
                                <!-- 删除修改密码入口 -->
                                <!-- <li><a class="dropdown-item" href="#"><i class="bi bi-gear"></i> 修改密码</a></li> -->
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item" href="${pageContext.request.contextPath}/API/user/logout"><i class="bi bi-box-arrow-right"></i> 退出登录</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>

            <!-- 添加面包屑导航 -->
            <nav aria-label="breadcrumb" class="bg-light p-3 mb-3">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item active" aria-current="page">首页</li>
                </ol>
            </nav>
            <!-- 内容区域 -->
            <div class="container-fluid p-4">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">欢迎页面</h5>
                            </div>
                            <div class="card-body">
                                欢迎使用管理系统
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap 5 JS 和依赖 -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<script>
</script>
</body>
</html>
